import React from 'react';
import {
  Row,
  Col,
  Alert,
  Icon,
  Popconfirm,
  Card,
  Button,
  Table,
  Form,
  Select,
  Modal,
  Divider,
} from 'antd';
import axios from '@/utils/Engineering/axios';
import Utils from '@/utils/Engineering/utils';
import ApiTubro from '@/utils/Engineering/ApiTubro';
import SearchControl from '@/utils/Engineering/SearchControl';
import ETable from '@/utils/Engineering/ETable';
import QuickTool from '@/utils/Engineering/QuickTool';
import { GridContent, PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';
import { connect } from 'dva';
import searchSources from './search.data';

const FormItem = Form.Item;
const Option = Select.Option;

@connect(({ loading, searchList }) => ({
  searchList,
  loading: loading.models.rule,
}))
export default class Order extends React.Component {
  state = {};
  pagination = {
    pageSize: 10,
    current: 1,
  };
  expand = false;

  searchFieldList = [
    searchSources.foo,
    searchSources.foo,
    searchSources.foo,
    searchSources.foo,
    searchSources.foo,
    searchSources.foo,
    searchSources.foo,
  ];
  columns = [
    { title: '订单编号', dataIndex: 'order_sn', key: 'order_sn' },
    { title: '车辆编号', dataIndex: 'bike_sn', key: 'bike_sn' },
    {
      title: '用户名',
      dataIndex: 'user_name',
      key: 'user_name',
      sorter: true,
      render: QuickTool.ropover('user_name'),
    },
    {
      title: QuickTool.tooltip({
        title: '手机号',
        help: '这里是输入的文字',
      }),
      dataIndex: 'mobile',
    },
    {
      title: '里程',
      dataIndex: 'distance',
      key: 'distance',
      render: distance => distance / 1000 + 'Km',
    },
    { title: '行驶时长', dataIndex: 'total_time', key: 'total_time' },
    {
      title: '徽章',
      dataIndex: 'status4',
      key: 'status4',
      render: QuickTool.badge({
        '0': { text: '待支付', status: 'processing' },
        '1': { text: '已支付', status: 'success' },
        '2': { text: '已取消', status: 'error' },
      }),
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      key: 'start_time',
      render: QuickTool.moment('', 'YYYY-MM-DD hh:mm:ss hi上帝是'),
    },
    { title: '结束时间', dataIndex: 'end_time', key: 'end_time', render: QuickTool.moment() },
    { title: '订单金额', dataIndex: 'total_fee', key: 'total_fee' },
    { title: '实付金额', dataIndex: 'user_pay', key: 'user_pay' },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, record, index) => {
        return (
          <div>
            <a onClick={() => this.openOrderMapPage(record.id)}>
              <Icon type="edit" style={{ marginRight: 2 }} />
              查看
            </a>
            <Divider type="vertical" />

            <a onClick={this.handleLineDelete}>
              <Icon type="delete" style={{ marginRight: 2 }} />
              结束订单
            </a>
            {/* <Divider type="vertical"/> */}
            {/*<a onClick={() => this.handleOperator('detail')}>员工详情</a>*/}
            <Divider type="vertical" />
            <Popconfirm
              placement="rightBottom"
              title="数据删除将不可以恢复,确定删除?"
              onConfirm={this.handleLineDelete}
              cancelText="否"
              okText="是"
            >
              <a href="">
                <Icon type="delete" style={{ marginRight: 2 }} />
                删除
              </a>
            </Popconfirm>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.getPageList();
    const { dispatch } = this.props;
    dispatch({
      type: 'searchList/fetch',
      payload: { pagination: { current: 3 } },
    });
  }

  getPageList = params =>
    ApiTubro.getPageList.bind(this)({
      url: '/api/search/list',
      data: this.pagination,
    });

  handleLineDelete = params =>
    ApiTubro.handleLineDelete.bind(this)({
      url: 'https://www.easy-mock.com/mock/5d2dcb9a934181050dd4ae65/api/order/ebike_info',
      data: { id: params },
    });

  handleMultipleDelect = params =>
    ApiTubro.handleMultipleDelect.bind(this)({
      url: `/order/ebike_info?${params}`,
      data: params,
    });
  openOrderMapPage = params =>
    ApiTubro.openOrderMapPage.bind(this)(`/#/common/order/detail/${params}`);
  handleFinishOrder = params => ApiTubro.handleFinishOrder.bind(this)(`/order/finish_order`);

  handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter, '改变表格输出 pagination, filters, sorter');
  };

  render() {
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };

    const { content } = this.props.searchList;
    return (
      <PageHeaderWrapper title="单号：234231029431">
        <Card>
          <SearchControl searchFieldList={this.searchFieldList} {...ApiTubro.mapping(this)} />

          <div style={{ marginBottom: 10 }}>
            <Button style={{ marginRight: 20 }} type="primary" icon="plus">
              新建
            </Button>

            {this.state.selectedRows ? (
              <Button
                type="primary"
                onClick={this.handleMultipleDelect}
                disabled={!this.state.selectedRows}
                loading={this.state.loading}
                icon="delete"
              >
                批量删除
              </Button>
            ) : (
              ''
            )}
          </div>
          {this.state.selectedRows ? (
            <Alert
              message={`已选择 ${this.state.selectedRows &&
                this.state.selectedRows.length} 项  服务调用次数总计  ${this.state.selectedRows
                .length * 65} 万`}
              type="info"
              showIcon
            />
          ) : (
            <Alert message={`已选择 0 项  服务调用次数总计  0 万`} type="info" showIcon />
          )}

          <div className="content-wrap">
            <Table
              // bordered
              style={{ marginTop: 10 }}
              columns={this.columns}
              // dataSource={this.props.searchList.content.list}
              dataSource={this.state.pageListData}
              onChange={() => this.handleTableChange}
              pagination={this.state.pagination}
              loading={!this.state.loadingTableisHide}
              rowSelection={{
                type: 'checkbox',
                selectedRowKeys: this.state.selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                  console.log(selectedRowKeys);
                  this.setState({
                    selectedRowKeys,
                    selectedRows,
                  });
                },
                getCheckboxProps: record => ({
                  disabled: record.status === (1 || 2), // Column configuration not to be checked
                  name: record.name,
                }),
              }}
              onRow={(record, index) => {
                return {
                  onDoubleClick: event => {
                    this.handleLineDelete(record.id);
                  },
                  // onDoubleClick: event => {},     //行双击
                  // onClick: event => {},           //行单击
                  // onContextMenu: event => {},     //右键单击行
                  // onMouseEnter: event => {},      // 鼠标移入行
                  // onMouseLeave: event => {},      //鼠标离开行
                  // onClick: () => {
                  //     let selectKey = [index];
                  //     this.setState({
                  //         selectedRowKeys: selectKey,
                  //         selectedItem: record
                  //     })
                  // }
                };
              }}

              // onHeaderRow={column => {
              //   return {
              //     onClick: () => {}, // 点击表头行
              //   };
              // }}
            />
          </div>
        </Card>

        <Modal
          title="结束订单"
          visible={this.state.defaultModalVisble}
          onCancel={() => {
            this.setState({ defaultModalVisble: false });
          }}
          onOk={this.handleFinishOrder.bind(this)}
          width={600}
        >
          <Form layout="horizontal">
            <FormItem label="车辆编号" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.bike_sn}
            </FormItem>
            <FormItem label="剩余电量" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.battery + '%'}
            </FormItem>
            <FormItem label="行程开始时间" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.start_time}
            </FormItem>
            <FormItem label="当前位置" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.location}
            </FormItem>
          </Form>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

//todo kim-stamp 箭头函数不同的表达方式
// render() { return this.getOptions() }  完整的
// render = () => (this.getOptions())     简化一步 ()=>() 不用再写return
// render = () => this.getOptions()       再简化一步
